<template>
    <div>
        <div style="height:calc(100vh);">
            <RelationGraph 
                ref="$graphRef" 
                :options="graphOptions"
                @node-click="handleNodeClick"
            >
                <template #graph-plug>
                    <RGMiniToolBar position-h="left" position-v="top" direction="h" />
                    <RGEditingController>
                        <RGEditingResize />
                    </RGEditingController>
                </template>
            </RelationGraph>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import RelationGraph, { RGEditingResize, RGEditingController, RGMiniToolBar } from 'relation-graph-vue3';
import {
    RelationGraphComponent,
    RGJsonData,
    RGNode
} from 'relation-graph-vue3';

const $graphRef = ref<RelationGraphComponent>(null);
const sourceNodeId = ref<string | null>(null); // 存储起始节点ID
const graphData = reactive<RGJsonData>({ // 使用reactive存储图表数据
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'Border color', borderColor: 'yellow', x: 200, y: 200, styleClass: '' },
        { id: 'b', text: 'Font color', color: '#43a2f1', fontColor: '#ffd700', x: 500, y: 200, styleClass: '' }
    ],
    lines: []
});

// 配置项
const graphOptions = {
    allowShowMiniToolBar: true,
    debug: false,
    allowSwitchLineShape: true,
    allowSwitchJunctionPoint: true,
    allowShowDownloadButton: true,
    defaultJunctionPoint: 'border',
    placeOtherNodes: false,
    placeSingleNode: false,
    graphOffset_x: -200,
    graphOffset_y: 100,
    // 启用编辑功能
    allowEdit: true,
    allowAddLine: true,
    allowNodeDrag: true,
    defaultLineMarker: {
        markerWidth: 20,
        markerHeight: 20,
        refX: 3,
        refY: 3,
        data: "M 0 0, V 6, L 4 3, Z"
    },
    layout: {
        layoutName: 'fixed'
    }
};

onMounted(() => {
    showGraph();
});

const showGraph = () => {
    if ($graphRef.value) {
        $graphRef.value.setJsonData(graphData);
    }
};

// 处理节点点击事件
const handleNodeClick = (node: RGNode) => {
    if (!sourceNodeId.value) {
        // 第一次点击 - 设置起始节点
        sourceNodeId.value = node.id;
        // 添加选中样式
        const sourceNode = graphData.nodes.find(n => n.id === node.id);
        if (sourceNode) {
            sourceNode.styleClass = 'node-selected';
            // 重新渲染图表
            $graphRef.value?.setJsonData({...graphData});
        }
    } else if (sourceNodeId.value !== node.id) {
        // 第二次点击 - 创建连线
        // 添加新连线
        graphData.lines.push({
            from: sourceNodeId.value,
            to: node.id,
            text: '关联'
        });
        
        // 移除起始节点的选中样式
        const sourceNode = graphData.nodes.find(n => n.id === sourceNodeId.value);
        if (sourceNode) {
            sourceNode.styleClass = '';
        }
        
        // 重置状态并重新渲染
        sourceNodeId.value = null;
        $graphRef.value?.setJsonData({...graphData});
    } else {
        // 点击同一个节点 - 取消选择
        const sourceNode = graphData.nodes.find(n => n.id === sourceNodeId.value);
        if (sourceNode) {
            sourceNode.styleClass = '';
        }
        sourceNodeId.value = null;
        $graphRef.value?.setJsonData({...graphData});
    }
};
</script>

<style scoped lang="scss">
::v-deep(.relation-graph) {
    .rel-map {
        background-size: 30px 30px;
        background-image: linear-gradient(90deg, rgba(0, 0, 0, .1) 1px, transparent 0), 
                         linear-gradient(180deg, rgba(0, 0, 0, .1) 1px, transparent 0);
    }
    
    // 选中节点的样式
    ::v-deep(.node-selected) {
        stroke: #42b983 !important;
        stroke-width: 3px !important;
        transition: all 0.3s ease;
    }
    
    ::v-deep(.node-selected .node-text) {
        fill: #42b983 !important;
        font-weight: bold;
    }
}
</style>
    